<template>
	<view class="con">
		<searchBar></searchBar>
		<view class="context" style="height:10px;">
			<scroll-view scroll-y :style="{height: wh + 'px'}" class="leftView">
				<view @click="selectItem(i)" class="item" :class="active == i ? 'active' : ''" v-for="(item,i) in cateList">{{item.cat_name}}</view>
			</scroll-view>
			<scroll-view scroll-y :style="{height: wh + 'px'}" class="rightView"> 
				<view v-for="(item,i) in itemList.children">
					<view class="title">
						{{item.cat_name}}
					</view>
					<view class="threeCon">
						<view @click="gotoItem(citem.name)" class="itemCon" v-for="(citem,ci) in item.children">
							<view class="citem" @click="gotoGoodsList(citem)">
								<image style="width:100%;" :src="citem.cat_icon" mode="widthFix"></image>
								<view>{{citem.cat_name}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>


<script setup>
	import searchBar from '../../components/searchBar/searchBar.vue'
</script>
<script>
	export default {
		data() {
			return {
				cateList:[],
				itemList:[],
				active:0,
				wh: 0
			};
		},
		onLoad(){
			// 获取当前系统的信息
			const sysInfo = uni.getSystemInfoSync()
			// 为 wh 窗口可用高度动态赋值
			this.wh = sysInfo.windowHeight
			this.loadCateList()
		},
		methods:{
			loadCateList(){
				uni.request({
					url:"https://api-hmugo-web.itheima.net/api/public/v1/categories",
					success:(res)=>{
						let data = res.data
						if(data.meta.status == 200){
							this.cateList = data.message;
							this.itemList = data.message[0]
						}else{
							uni.showModal({
								title:"网路错误"
							})
						}
					}
				})
			},
			selectItem(i){
				this.active = i;
				this.itemList = this.cateList[i]
			},
			gotoGoodsList(i) {
			  uni.navigateTo({
			    url: '/subpkg/goods_list/goods_list?cid=' + i.cat_id
			  })
			},
			gotoItem(name){
				uni.navigateTo({
					url:"/subpkg/goods_list/goods_list?query=" + name
				})
			},
		}
	}
</script>

<style lang="scss">
	uni-page-body{
		height:100%;
	}
	.con{
		height:100%;
		// background:red;
		display:flex;
		flex-direction:column;
	}
	.context{
		flex:1;
		// background:blue;
		display:flex;
	}
	.leftView{
		height:100%;
		width:200rpx;
		background:#f2f2f2;
	}
	.item{
		padding:20rpx;
		height:70rpx;
		line-height:70rpx;
		border-bottom:1px solid #dedede;
		text-align:center;
	}
	.rightView{
		flex:1;
		height: 100%;
	}
	.threeCon{
		display:flex;
		flex-wrap:wrap;
	}
	.itemCon{
		width:30%;
		text-align:center;
		margin:20rpx 1.5%;
	}
	.rightView .title{
		height:60rpx;
		line-height:60rpx;
		font-weight:bold;
		padding:0 30rpx;
		border-bottom:1px solid #dedede;
	}
	.leftView .active{
		font-size:20px;
		font-weight:bold;
	}
</style>
